﻿<template>
    <el-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1000"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="物料名称" prop="materialName">
                        <el-input v-model="entityObj.materialName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="物料分类" prop="materialTypeId">
                        <el-tree-select
                            placeholder="---请选择物料分类---"
                            collapse-tags
                            collapse-tags-tooltip
                            v-model="entityObj.materialTypeId"
                            :props="{ label: 'label', value:'value',children: 'children' }"
                            :default-expand-all="true"
                            :data="materialTypeTree"
                            filterable
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="orgType==1">
                <el-col :span="12">
                    <el-form-item label-width="120px" label="物料内码" prop="code">
                        <el-input v-model="entityObj.code" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="物料编码" prop="materialCode">
                        <el-input v-model="entityObj.materialCode" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="orgType==1"> 
                <el-col :span="12">
                    <el-form-item label-width="120px" label="物料简码" prop="materialSimpCode">
                        <el-input v-model="entityObj.materialSimpCode" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="品牌" prop="brandCodes">
                        <el-select
                            placeholder="---请选择品牌---"
                            v-model="entityObj.brandCodes"
                            multiple
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in optionsBrand"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="物料规格" prop="materialSpecs">
                        <el-input v-model="entityObj.materialSpecs" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="状态">
                        <el-switch
                            v-model="entityObj.status"
                            :active-value="1"
                            :inactive-value="0"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label>
                        <el-button size="small" @click="addUnit()">增加单位</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="物料单位" prop="materialItems">
                        <el-table :data="entityObj.materialItems" border style="width: 100%">
                            <el-table-column label="单位名称" prop="unitCode">
                                <template #default="scope">
                                    <el-form-item>
                                        <el-select
                                            placeholder="---请选择单位---"
                                            v-model="scope.row.unitCode"
                                            style="width: 300px"
                                        >
                                            <el-option
                                                v-for="item in optionsUnit"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column label="是否最小单位" width="180" prop="isMinUnit">
                                <template #default="scope">
                                    <el-switch
                                        v-model="scope.row.isMinUnit"
                                        :active-value="true"
                                        :inactive-value="false"
                                        @change="setIsMinUnit(scope.$index)"
                                    />
                                </template>
                            </el-table-column>
                            <el-table-column label="换算系数" width="180" prop="unitQty">
                                <template #default="scope">
                                    <el-input-number
                                        v-model="scope.row.unitQty"
                                        style="width: 100%"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template #default="scope">
                                    <el-button
                                        size="small"
                                        @click="deleteRow (scope.$index, scope.row)"
                                    >移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="orgType==1">
                <el-col :span="12">
                    <el-form-item label-width="120px" label="采购单位" prop="purchaseUnitCode">
                        <el-select
                            placeholder="---请选择单位---"
                            v-model="entityObj.purchaseUnitCode"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in optionsUnit"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="销售单位" prop="saleUnitCode">
                        <el-select
                            placeholder="---请选择单位---"
                            v-model="entityObj.saleUnitCode"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in optionsUnit"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="orgType==1">
                <el-col :span="12">
                    <el-form-item label-width="120px" label="库存单位" prop="stockUnitCode">
                        <el-select
                            placeholder="---请选择单位---"
                            v-model="entityObj.stockUnitCode"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in optionsUnit"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="辅助单位" prop="auxiliaryUnitCode">
                        <el-select
                            placeholder="---请选择单位---"
                            v-model="entityObj.auxiliaryUnitCode"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in optionsUnit"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="orgType==1">
                <el-col :span="12">
                    <el-form-item label-width="120px" label="最低库存预警" prop="minStock">
                        <el-input-number v-model="entityObj.minStock" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="最低配送数量" prop="minDeliveryQty">
                        <el-input-number v-model="entityObj.minDeliveryQty" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="orgType==1">
                <el-col :span="12">
                    <el-form-item label-width="120px" label="普票税率">
                        <el-input-number
                            style="margin-right: 10px;"
                            v-model="entityObj.generalRate"
                        />%
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="增票税率">
                        <el-input-number
                            style="margin-right: 10px;"
                            v-model="entityObj.incrementRate"
                        />%
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="orgType==1">
                <el-col :span="12">
                    <el-form-item label-width="120px" label="是否特殊物料" prop="isSpecial">
                        <el-radio-group v-model="entityObj.isSpecial">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label-width="120px" label="是否网购物料" prop="isOnlineGoods">
                        <el-radio-group v-model="entityObj.isOnlineGoods">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col> -->
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="备注">
                        <el-input v-model="entityObj.remarks" type="textarea" :rows="2" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="物料缩略图" prop="materialImage">
                        <sc-upload
                            v-model="entityObj.materialThumbnailImage"
                            :objName="'Supply/Material'"
                            draggable
                            :uploadType="'OSS'"
                            :bucketName="'jtmc'"
                            :limit="1"
                            tip="最多上传1个文件,请上传图像格式文件"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="物料图片" prop="materialImage">
                        <sc-upload-multiple
                            v-model="entityObj.materialImage"
                            :objName="'Supply/Material'"
                            draggable
                            :uploadType="'OSS'"
                            :bucketName="'jtmc'"
                            :limit="8"
                            tip="最多上传8个文件,请上传图像格式文件"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="详情" prop="materialDetail">
                        <sc-editor
                            ref="scMaterialDetail"
                            v-model="entityObj.materialDetail"
                            :height="500"
                        ></sc-editor>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button
                v-if="mode != 'Show'"
                type="primary"
                :loading="isSaveing"
                @click="submit()"
            >保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            orgType:1,
            titleMap: {
                Add: "新增",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {
                minStock: 0,
                minDeliveryQty: 1,
                isSpecial: false,
                isOnlineGoods: false,
                status: 1,
                materialItems: [
                    { unitCode: "", unitName: "", isMinUnit: true, unitQty: 0 },
                ],
            },
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            //验证规则
            rules: {
                materialName: [
                    { required: true, type: "string", message: "请填写" },
                ],
                materialTypeId: [
                    { required: true, type: "number", message: "请填写" },
                ],
                materialSpecs: [
                    { required: true, type: "string", message: "请填写" },
                ],
                purchaseUnitCode: [
                    { required: true, type: "string", message: "请填写" },
                ],
                saleUnitCode: [
                    { required: true, type: "string", message: "请填写" },
                ],
                stockUnitCode: [
                    { required: true, type: "string", message: "请填写" },
                ],
                auxiliaryUnitCode: [
                    { required: true, type: "string", message: "请填写" },
                ],
                minStock: [
                    { required: true, type: "number", message: "请填写" },
                ],
                isSpecial: [
                    { required: true, type: "boolean", message: "请填写" },
                ],
                isOnlineGoods: [
                    { required: true, type: "boolean", message: "请填写" },
                ],
                minDeliveryQty: [
                    { required: true, type: "number", message: "请填写" },
                ],
                brandCodes: [
                    {
                        required: true,
                        type: "array",
                        message: "请填写",
                        trigger: "change",
                    },
                ],
                materialItems: [
                    {
                        required: true,
                        type: "array",
                        message: "请填写",
                        trigger: "change",
                    },
                ],
            },
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
        };
    },
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },

        addUnit() {
            this.entityObj.materialItems = [
                ...this.entityObj.materialItems,
                {},
            ];
        },
        deleteRow(index) {
            this.entityObj.materialItems.splice(index, 1);
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    if (
                        !this.entityObj.materialItems ||
                        this.entityObj.materialItems.length == 0
                    ) {
                        this.$message.error("物料单位不能为空");
                        return;
                    }

                    this.entityObj.materialItems.map((p) => {
                        if (!p.unitCode) {
                            this.$message.error("单位不能为空");
                        }

                        if (!p.unitQty) {
                            this.$message.error("换算系数不能为空");
                        }
                        p.unitName = this.optionsUnit.find(
                            (t) => t.value == p.unitCode
                        ).label;
                    });

                    this.entityObj.purchaseUnitName = this.optionsUnit.find(
                        (t) => t.value == this.entityObj.purchaseUnitCode
                    ).label;
                    this.entityObj.saleUnitName = this.optionsUnit.find(
                        (t) => t.value == this.entityObj.saleUnitCode
                    ).label;
                    this.entityObj.stockUnitName = this.optionsUnit.find(
                        (t) => t.value == this.entityObj.stockUnitCode
                    ).label;
                    this.entityObj.auxiliaryUnitName = this.optionsUnit.find(
                        (t) => t.value == this.entityObj.auxiliaryUnitCode
                    ).label;

                    this.entityObj.materialImages =
                        this.entityObj.materialImage.split(",");
                    this.isSaveing = true;
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                this.mode == "Add"
                                    ? "material/create"
                                    : "material/update",
                                { ...this.entityObj }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                            this.isSaveing = false;
                        }
                    } catch (error) {
                        this.loading = false;
                        return false;
                    }
                }
            });
        },
        async setIsMinUnit(index) {
            console.log(index);
            this.entityObj.materialItems.map((p, i) => {
                p.isMinUnit = false;
                if (index == i) p.isMinUnit = true;
            });
        },
        //表单注入数据
        async setData(data) {
            if (this.mode != "Add" && data) {
                this.entityObj = {
                    ...data,
                    materialImage: data.materialImages.join(","),
                };
            } else {
                this.entityObj = {
                    minStock: 0,
                    minDeliveryQty: 1,
                    isSpecial: false,
                    isOnlineGoods: false,
                    status: 1,
                    brandCodes:[],
                    generalRate: 3,
                    incrementRate: 13,
    
                    materialItems: [
                        {
                            unitCode: "",
                            unitName: "",
                            isMinUnit: true,
                            unitQty: 0,
                        },
                    ],
                };
            }

            console.log(this.entityObj);
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/dic-options",
                    { ParentBaseDictionaryCodes: ["001", "002"] }
                );
                if (returnValue.status == 200) {
                    this.optionsBrand = returnValue.response.find(
                        (p) => p.code == "001"
                    ).optionsDetails;
                    this.optionsUnit = returnValue.response.find(
                        (p) => p.code == "002"
                    ).optionsDetails;

                    if (this.optionsUnit && this.optionsUnit.length > 0) {
                        this.entityObj.purchaseUnitCode =
                            this.optionsUnit[0].value;
                        this.entityObj.saleUnitCode = this.optionsUnit[0].value;
                        this.entityObj.stockUnitCode =
                            this.optionsUnit[0].value;
                        this.entityObj.auxiliaryUnitCode =
                            this.optionsUnit[0].value;
                    }
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        this.entityObj.orgName = tool.data.get("USER_INFO").OrgName;
        await this.initOptions();
    },
};
</script>

<style></style>
